<template>
  <!-- 主容器 -->
  <div id="all" class="viewmiddle_3 dark_bgcolor2" @dragover.prevent @drop.prevent="handleDrop">
    <!-- 内容区域 -->
    <div id="nierong">
      <!-- 标题 -->
      <div>
        <h4>去水印</h4>
      </div>
      <!-- 描述文字 -->
      <span>全平台短视频,一键去水印</span>
      <!-- 分割线 -->
      <div><el-divider /></div>

      <!-- 输入和输出区域 -->
      <div>
        <el-row :gutter="50">
          <el-col :span="12">
            <div>短视频链接</div>
          </el-col>
          <el-col :span="12">
            <div>结果解析</div>
          </el-col>
        </el-row>
      </div>

      <!-- 文本输入框 -->
      <div>
        <el-row :gutter="50">
          <el-col :span="12">
            <div>
              <textarea 
                v-model="textarea1" 
                class="dark_bgcolor qsxtext" 
                maxlength="8000" 
                placeholder="请输入短视频链接或拖动文件到这里"
              ></textarea>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <textarea 
                v-model="textarea2" 
                class="dark_bgcolor qsxtext" 
                maxlength="8000" 
                placeholder="解析结果将显示在这里"
                readonly
              ></textarea>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 操作按钮 -->
      <div>
        <el-row :gutter="50">
          <el-col :span="12">
            <div>
              <el-button 
                type="primary" 
                style="background-color: blueviolet; border: transparent;" 
                @click="removeWatermark"
              >
                去水印解析
              </el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-button 
                type="primary" 
                style="background-color: darkgrey; border: transparent;" 
                @click="copyVideoLink"
              >
                复制视频链接
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 备注信息 -->
      <div style="margin-top: 50px;">
        备注：此去水印功能为免费功能，仅供个人参考学习，请勿用于商业用途。
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 响应式变量，用于绑定输入框的值
const textarea1 = ref('') // 短视频链接输入框
const textarea2 = ref('') // 结果解析输出框

// 去水印解析函数（示例，具体实现需根据实际需求）
const removeWatermark = () => {
  // 这里可以调用后端接口或进行前端处理
  textarea2.value = `解析结果：${textarea1.value}`
}

// 复制视频链接函数
const copyVideoLink = () => {
  navigator.clipboard.writeText(textarea2.value)
    .then(() => {
      successMessage('视频链接已复制到剪贴板');

    })
    .catch(err => {
      console.error('复制失败:', err)
    })
}

// 成功提示
const successMessage = (value: string): void => {
  ElMessage({
    message: value,
    type: 'success',
  })
}

// 错误提示
const errorMessage = (value: string): void => {
  ElMessage.error(value)
}

// 处理文件拖放
const handleDrop = (event: DragEvent) => {
  event.preventDefault()
  if (event.dataTransfer && event.dataTransfer.files.length > 0) {
    const file = event.dataTransfer.files[0]
    const filePath = file.path || file.name // 获取文件路径或文件名
    textarea1.value = filePath
  }
}
</script>

<style scoped>
/* 内容区域的样式 */
#nierong {
  padding: 20px 40px; /* 设置内边距 */
}

/* 主容器样式 */
.viewmiddle_3 {
  border-radius: 10px; /* 设置圆角 */
  margin-top: 50px; /* 设置上外边距 */
  width: 100%; /* 设置宽度为100% */
  height: 100; /* 设置高度 */
}

/* 文本输入框样式 */
.qsxtext {
  width: 100%; /* 设置宽度为100% */
  height: 230px; /* 设置高度 */
  margin-top: 10px; /* 设置上外边距 */
  resize: none; /* 禁止用户调整大小 */
}
</style>